<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
        <title>Fetch API - simple-datatables</title>
        <!-- DataTable Styles -->
        <link rel="stylesheet" href="../dist/css/style.css">
        <!-- Demo Styles -->
        <link rel="stylesheet" href="../demo.css">
    </head>
    <body>
        <header>
            <h1>
                <a href="../../">simple-datatables</a>
            </h1>
            <a href="../../documentation">Documentation</a>
            <a href="../">Demos</a>
        </header>

        <h2>Fetch API</h2>

        <table id="demo-table"></table>

        <script src="../dist/umd.js"></script>
        <script>
            fetch("data.json")
                .then(response => response.json())
                .then(data => {
                    if (!data || !data.length) {
                        return
                    }
                    window.datatable = new window.simpleDatatables.DataTable("#demo-table", {
                        data: {
                            headings: Object.keys(data[0]),
                            data: data.map(item => Object.values(item))
                        }
                    })
                })
        </script>
    </body>
</html>
